<template>
  <Header />
  <!-- 顶部图片 -->
  <div class="headerBanner">
    <img
      src="https://s2-10623.kwimgs.com/kos/nlav10623/vision_images/topBannerx1.png"
      alt=""
    />
  </div>
  <!-- 导航栏 -->
  <div class="navContainer">
    <span><router-link to="/theater">我的关注</router-link></span>
    <span><router-link to="/shortvideo"> 短视频</router-link></span>
    <span><router-link to="/theater">直播</router-link></span>
    <span><router-link to="/theater">同城</router-link></span>
    <span><router-link to="/longvideo">长视频</router-link></span>
    <span><router-link to="/theater">小剧场</router-link></span>
    <span><router-link to="/movie">电影</router-link></span>
  </div>
  <!-- 短视频区 -->
  <VideoHeader />
  <!-- 快手同城 -->
  <SameCity />
  <!-- 长视频 -->
  <Longvideo />
  <!-- 游戏直播 -->
  <LiveDroadcast />
  <!-- 电影 -->
  <Movie />
  <!-- 小剧场 -->
  <Theater />
  <!-- AcFun -->
  <AcFun />
  <Footer />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
    Movie,
    Longvideo,
    SameCity,
    LiveDroadcast,
    VideoHeader,
    Theater,
    AcFun,
    Header,
    Footer,
  },
  name: 'Home',
})
</script>

<script lang="ts" setup>
import VideoHeader from './components/VideoHeader.vue'
import LiveDroadcast from './components/LiveDroadcast.vue'
import Movie from './components/Movie.vue'
import Longvideo from './components/Longvideo.vue'
import SameCity from './components/SameCity.vue'
import Theater from './components/Theater.vue'
import AcFun from './components/AcFun.vue'
import Header from '@/components/smallJcHeader/Header.vue'
import Footer from '@/components/footer/footer.vue'
</script>

<style lang="less" scoped>
// 头部图片
.headerBanner {
  width: 100%;

  img {
    width: 100%;
    height: 390px;
    object-fit: cover;
  }
}
// 导航栏区
.navContainer {
  width: 1100px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  span {
    display: block;
    width: 92px;
    height: 40px;
    border-radius: 20px;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
  }
}
</style>
